<template>
    <div>
        <div>
            <el-input size="small" class="addPosInput" placeholder="添加职位 " prefix-icon="el-icon-plus"
                      @keydown.enter.native="addPosition" v-model="pos.name">
<!--                回车触发addPosition-->
            </el-input>
            <el-button icon="el-icon-plus" size="small" type="primary" @click="addPosition">
                添加
            </el-button>
        </div>

        <div class="posManaMain">
            <el-table
                    :data="positions"
                    border
                    @selection-change="handleSelectionChange"
                    size="small"
                    stripe
                    style="width: 70%">

                <!--多选删除按钮框-->
                <el-table-column type="selection" width="55"></el-table-column>

                <el-table-column prop="id" label="编号" width="50"></el-table-column>
                <el-table-column prop="name" label="职位名称" width="180"></el-table-column>
                <el-table-column prop="createDate" label="创建时间" width="180"></el-table-column>


                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="showEditView(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--当选项为零时，按钮不可用 :示 v-model   v-bind:disabled=" " -> css disabled=true|false -->
            <el-button @click="deleteMany" type="danger" size="small" style="margin-top:8px"
                       :disabled="multipleSelection.length===0">批量删除
            </el-button>
        </div>

        <el-dialog title="修改职位信息" :visible.sync="dialogVisible" width="30%">
            <div>
                <el-tag>职位名称</el-tag>
                <el-input class="updatePosInput" size="small" v-model="updatePos.name"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "PosMana",
        data() {
            return {
                pos: {
                    name: ''
                },
                positions: [],

                multipleSelection: [],

                dialogVisible: false,
                updatePos: {
                    name: ''
                }
            }
        },
        // vue 的生命周期mounted 调用方法 实现初始化职位表格
        mounted() {
            this.initPositions();
        },
        methods: {
            //批量删除
            deleteMany() {
                this.$confirm('此操作将永久删除[' + this.multipleSelection.length + ']条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = '?';
                    this.multipleSelection.forEach(item => {
                        ids += 'ids=' + item.id + '&'
                    })

                    //console.log("ids:" + ids)

                    this.deleteRequest("/system/basic/pos/" + ids).then(resp => {
                        if (resp) {
                            // 删除成功后，刷新页面
                            this.initPositions();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //多选
            handleSelectionChange(val) {
                this.multipleSelection = val
                //console.log(this.multipleSelection)
            },
            //添加职位
            addPosition() {
                if (this.pos.name) {
                    this.postRequest("/system/basic/pos/", this.pos).then(resp => {
                        if (resp) {
                            // 刷新职位表格
                            this.initPositions();
                            // 添加完成后，清空输入框
                            this.pos.name = '';
                        }else{
                            this.$message.error('添加失败');
                        }
                    })
                } else {
                    this.$message.error('职位名称不能为空')
                }
            },
            showEditView(index, data) {
                //Object.assign方法用于对象的合并,Object.assign(target, source1, source2);相同后面为准
                Object.assign(this.updatePos, data);
                this.dialogVisible = true

            },
            //跟新职位
            doUpdate() {
                this.putRequest("/system/basic/pos/", this.updatePos).then(resp => {
                    if (resp) {
                        this.initPositions();
                        this.updatePos.name = ''

                        this.dialogVisible = false
                    }
                })
            },
            //删除职位
            handleDelete(index, data) {
                this.$confirm('此操作将永久删除[' + data.name + ']职位, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/pos/" + data.id).then(resp => {
                        if (resp) {
                            // 删除成功后，刷新页面
                            this.initPositions();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            initPositions() {
                //初始化职位表格
                this.getRequest("/system/basic/pos/").then(resp => {
                        if (resp) {
                            this.positions = resp;
                        }
                    }
                )
            }
        }
    }
</script>

<style>
    .updatePosInput {
        width: 200px;
        margin-left: 8px;
    }

    .addPosInput {
        width: 300px;
        margin-right: 8px;
    }

    .posManaMain {
        margin-top: 10px;
    }
</style>